<%@ page import="com.party.core.model.system.TargetType" %>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="../include/tag.jsp"%>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>${subject == null ? '发布' : '编辑'}主题</title>
    <%@include file="../include/commonFile.jsp"%>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/css/ui/activity/publish_form.css">

    <style type="text/css">
        .remark {
            color: #8c8c8c;
            float: left;
            margin-top: -28px;
            margin-left: 210px;
            width: 200px;
        }
    </style>
</head><body>
<!--头部-->
<%@include file="../include/header.jsp"%>
<div class="index-outside">
    <%@include file="../include/sidebar.jsp"%>
    <!--内容-->
    <section>
        <div class="section-main">
            <!-- 正文请写在这里 -->
            <div class="add-form-content">
            <form id="myForm" class="layui-form mt20" method="post" action="${ctx}/mall/showtemplate/save.do">
                <input type="hidden" name="id" value="${template.id}" />
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">主题分类<span class="f-verify-red">*</span></label>
                        <div class="layui-input-inline">
                            <input type="text" name="name" lay-verify="name" autocomplete="off" class="layui-input"
                                   value="${template.name}" placeholder="最多5个汉字"/>
                            <span class="remark">主题分类显示在微商城首页</span>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">主题海报<span class="f-verify-red">*</span></label>
                    <div class="cover-content">
                        <input type="hidden" name="pic" id="pic" lay-verify="pic" value="${template.pic}"/>
                        <c:if test="${template == null || empty template.pic}">
                                <span id="cover-img" class="cover-img"
                                      style="background-image:url(${ctx}/image/posterImg.png)"></span>
                        </c:if>
                        <c:if test="${template != null && not empty template.pic}">
                                <span id="cover-img" class="cover-img"
                                      style="background-image:url('${template.pic}')"></span>
                        </c:if>
                        <c:if test="${not empty template.id}">
                            <a class="layui-btn layui-btn-danger" id="sel_pic_img">更换海报</a>
                        </c:if>
                        <c:if test="${empty template.id}">
                            <a class="layui-btn layui-btn-danger" id="sel_pic_img">添加海报</a>
                        </c:if>
                        <div class="form-word-aux">建议尺寸：800x450</div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">主题说明<span class="f-verify-red">*</span></label>
                        <div class="layui-input-inline" >
                            <input type="text" name="instruction" lay-verify="instruction" autocomplete="off" class="layui-input"
                                   value="${template.instruction}" style="width: 900px ;"/>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">主题内容<span class="f-verify-red">*</span></label>
                    <div class="layui-input-block">
                        <script id="ueditor1" type="text/plain" style="width: 900px; height: 500px;"></script>
                        <div style="display: none" id="contentView">${template.content}</div>
                        <input type="hidden" name="content" id="content" lay-verify="content"  data-link-ue="ueditor1"/>
                    </div>
                </div>

                <div class="layui-form-item">
                     <label class="layui-form-label">购买说明</label>
                     <div class="layui-input-block">
                        <script id="ueditor2" type="text/plain" style="width: 900px; height: 500px;"></script>
                        <div style="display: none" id="contentView2">${template.buyInstruction}</div>
                        <input type="hidden" name="buyInstruction" id="buyInstruction" lay-verify="buyInstruction"  data-link-ue="ueditor2"/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <a href="javascript:void(0)" class="layui-btn layui-btn-danger" lay-submit lay-filter="*">立即提交</a>
						<a href="${ctx}/mall/showtemplate/list.do" class="layui-btn layui-btn-primary">取消</a>
                    </div>
                </div>
            </form>
            </div>
        </div><%@include file="../include/footer.jsp"%>
    </section>
</div>
<!--底部-->
<script type="text/javascript" src="${ctxStatic}/UEditor/ueditor.config.js"></script>
<script type="text/javascript" src="${ctxStatic}/UEditor/ueditor.all.js"></script>
<script type="text/javascript" src="${ctxStatic}/UEditor/myplugin/uploadCI.js"></script>
<script type="text/javascript" src="${ctxStatic}/UEditor/myplugin/uploadVideo.js"></script>
<script type="text/javascript" src="${ctxStatic}/UEditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="${ctx}/script/common/form_cache.js"></script>
<script>
	var ue = UE.getEditor('ueditor1'),
        ue2 = UE.getEditor('ueditor2'),
        form, formcache;

    $(function () {
        layui.use([ 'form', 'laydate' ], function() {
            var form = layui.form;

            //自定义验证规则
            form.verify({
                name : function(value) {
                    if (!value || !value.trim()) {
                        return '请填写主题分类名称';
                    } else {
                        if (util.strRealLength(value) > 10) {
                            return '主题分类名称最多5个汉字或10个字母(数字)';
                        }
                    }
                },
                pic: function (value) {
                  if (!value) {
                      return '请添加主题海报';
                  }
                },
                instruction: function (value) {
                    if (!value || !value.trim()) {
                        return '请填写主题说明';
                    }
                },
                content : function(value) {
                    $("#contentView").html(ue.getContent());
                    var content = $("#contentView").html();
                    if (content == "" || !content.trim()) {
                        return "请填写主题内容";
                    }
                }
            });

            //监听提交
            form.on('submit', function (data) {
                txz.submitObject(data.elem, function (callBack) {
                    var formData = getFormData();
                    txz.ajaxRequest({
                        method: 'post',
                        url: '${ctx}/mall/showtemplate/save.do',
                        saveCache: true,
                        cacheObj: formcache,
                        params: formData,
                        callBack: function (res) {
                            typeof callBack === 'function' && callBack();
                            if (res.success) {
                                util.layerMsgSuccess("提交成功", function () {
                                    location.href = "${ctx}/mall/showtemplate/list.do";
                                });
                            } else {
                                util.layerMsgError("提交失败")
                            }
                        }
                    });
                });
                return false;
            });
        });

        $('#sel_pic_img').click(function () {
            txz.openSelImg({
                min: 1,
                max: 1,
                info: '建议尺寸：800x450',
                type: '<%=TargetType.ZC_ACTIVITY.getCode()%>',
                cb: function (imgs) {
                    $('#cover-img').css('background-image', 'url(' + imgs[0].path + ')');
                    $('#pic').val(imgs[0].path);
                }
            })
        })

        ue.addListener('ready', function() {
         /*   if ($("#contentView").html() != "") {
                this.setHeight(850);
            }*/
            this.setContent($("#contentView").html());
            //等待ueditor加载完后加载缓存
            <%--if(!'${template.id}'){
                formcache = new fCache({
                    fCacheKey: 'form_cache_mall_template',//暂存的key
                    cacheCallback: loadCacheData,//获取到缓存后加载的方法
                    getFormData: getFormData
                }).init();
            }--%>
        });

        ue2.addListener('ready', function() {
            /*   if ($("#contentView").html() != "") {
                   this.setHeight(850);
               }*/
            this.setContent($("#contentView2").html());
        });

        ue.addListener('blur', function() {
            $("#contentView").html(ue.getContent());
        });

        ue2.addListener('blur', function() {
            $("#contentView2").html(ue2.getContent());
        });
    })

	// 文本编辑器图片上传
	function uEditorUploadCI(editor) {
        txz.openSelImg({
            min: 1,
            type: '<%=TargetType.MALL.getCode()%>',
            cb: function (imgs) {
                if (imgs.length) {
                    for (var i = 0, item; i < imgs.length; i++) {
                        item = imgs[i];
                        editor.focus();
                        editor.execCommand('inserthtml', item.htmlStr);
                    }
                }
            }
        })
	}

    function uEditorUploadCIVideo(editor) {
        txz.openSelVideo({
            min: 1,
            type: '<%=TargetType.MALL.getCode()%>',
            cb: function (imgs) {
                if (imgs.length) {
                    for (var i = 0, item; i < imgs.length; i++) {
                        item = imgs[i];
                        editor.focus();
                        editor.execCommand('inserthtml', item.htmlStr);
                    }
                }
            }
        })
    }

    function loadCacheData(cacheData) {
        form.render();
    }

    function getFormData() {
        $("#content").val(ue.getContent().replace(/&quot;/gi, ""));
        $("#buyInstruction").val(ue2.getContent().replace(/&quot;/gi, ""));
        var formData = util.serializeForm($('#myForm').serializeArray());
        return formData;
    }
</script>
</body>
<script type="text/javascript">
    txz.initHeader({
        nav:[{
            name: '主题分类',
            href:'${ctx}/mall/showtemplate/list.do'
        },{
            name: '${subject == null ? '发布' : '编辑'}主题',
            curr: true
        }],
        btns:[{
            type: 'back'
        }]
    });
</script>
</html>